import React from "react";
import { Row, Col, Button, message, PageHeader, Spin ,Space,Input} from "antd";
import BraftEditor from "braft-editor";
import "braft-editor/dist/index.css";
import { withRouter } from "react-router-dom";

import { _updateNews } from "../../../../utils/news/index";
class AddArticle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: BraftEditor.createEditorState(null),
      user_id: null,
      isshow: false,
      isLoading: false,
      news_title: null,
    };
  }
  UNSAFE_componentWillMount = () => {
    let htmlContent = this.props.location.state.news_content;
    // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
    this.setState({
      editorState: BraftEditor.createEditorState(htmlContent),
    });
  };
  componentDidMount = () => {
  };

  submitContent = async () => {
    this.setState({ isLoading: true });
    const htmlString = this.state.editorState.toHTML();
    let tempData = {
     news_content: htmlString,
      news_title:this.state.news_title
    };
    _updateNews(this.props.location.state.news_id, tempData)
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ isLoading: false });
          message.success("更新成功", 1.5).then(() => {});
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };

  handleEditorChange = (editorState) => {
    this.setState({ editorState });
  };
  onInputChange = (e) => {
    let inputValue = e.target.value;
    let inputName = e.target.name;
    this.setState({
      [inputName]: inputValue,
    });
  };
  // 预览
  preview = () => {
    if (window.previewWindow) {
      window.previewWindow.close();
    }

    window.previewWindow = window.open();
    window.previewWindow.document.write(this.buildPreviewHtml());
    window.previewWindow.document.close();
  };
  buildPreviewHtml() {
    return `
      <!Doctype html>
      <html>
        <head>
          <title>Preview Content</title>
          <style>
            html,body{
              height: 100%;
              margin: 0;
              padding: 0;
              overflow: auto;
              background-color: #f1f2f3;
            }
            .container{
              box-sizing: border-box;
              width: 1000px;
              max-width: 100%;
              min-height: 100%;
              margin: 0 auto;
              padding: 30px 20px;
              overflow: hidden;
              background-color: #fff;
              border-right: solid 1px #eee;
              border-left: solid 1px #eee;
            }
            .container img,
            .container audio,
            .container video{
              max-width: 100%;
              height: auto;
            }
            .container p{
              white-space: pre-wrap;
              min-height: 1em;
            }
            .container pre{
              padding: 15px;
              background-color: #f1f1f1;
              border-radius: 5px;
            }
            .container blockquote{
              margin: 0;
              padding: 15px;
              background-color: #f1f1f1;
              border-left: 3px solid #d1d1d1;
            }
          </style>
        </head>
        <body>
          <div class="container">${this.state.editorState.toHTML()}</div>
        </body>
      </html>
    `;
  }
  render() {
    const { editorState } = this.state;
    const excludeControls = [
      "media",
      "emoji",
      "link",
      "italic",
      "text-color",
      "line-height",
    ];
    const extendControls = [
      {
        key: "custom-button",
        type: "component",
        component: (
          <button
            type="button"
            className="control-item button upload-button"
            data-title="预览"
            onClick={this.preview}
          >
            预览
          </button>
        ),
      },
    ];
    return (
      <div style={{ minHeight: 360 }}>
        <Row>
          <Col span={24}>
            <PageHeader
              ghost={false}
              onBack={() => window.history.back()}
              subTitle="编辑公告"
              extra={[
                <Button type="primary" block onClick={this.submitContent}>
                  保存修改
                </Button>,
              ]}
            ></PageHeader>
          </Col>
        </Row>
        <br />
        <Row>
          <Col span={24}>
            <Spin tip="Loading..." spinning={this.state.isLoading}>
              <Space direction="vertical">
                <Input
                  placeholder="通告标题"
                  addonBefore="标题"
                  allowClear
                  onChange={this.onInputChange}
                  name="news_title"
                  defaultValue={this.props.location.state.news_title}
                />
                <BraftEditor
                  value={editorState}
                  onChange={this.handleEditorChange}
                  onSave={this.submitContent}
                  extendControls={extendControls}
                  excludeControls={excludeControls}
                />
              </Space>
            </Spin>
          </Col>
        </Row>
      </div>
    );
  }
}

export default withRouter(AddArticle);
